<template>
	<view class="container">
		<view class="title">TCP通信测试</view>
		
		<view class="form-group">
			<label>服务器地址:</label>
			<input v-model="serverAddress" placeholder="请输入服务器地址，格式：IP:端口" />
		</view>
		
		<view class="form-group">
			<label>数据格式:</label>
			<picker @change="onFormatChange" :value="formatIndex" :range="formatList">
				<view class="picker">
					当前格式: {{ formatList[formatIndex] }}
				</view>
			</picker>
		</view>
		
		<view class="btn-group">
			<button @click="connect" :disabled="isConnected">连接</button>
			<button @click="disconnect" :disabled="!isConnected">断开</button>
		</view>
		
		<view class="form-group">
			<label>发送数据:</label>
			<textarea v-model="sendData" placeholder="请输入要发送的数据"></textarea>
			<button @click="sendDataToServer" :disabled="!isConnected">发送</button>
		</view>
		
		<view class="form-group">
			<label>接收数据:</label>
			<scroll-view class="message-list" scroll-y="true">
				<view class="message-item" v-for="(item, index) in messageList" :key="index">
					<text>{{ item.time }}</text>
					<text>{{ item.content }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			serverAddress: '192.168.1.228:9001',
			sendData: '',
			messageList: [],
			isConnected: false,
			formatList: ['STRING', 'HEX', 'BASE64'],
			formatIndex: 0,
			tcpSdk: null
		}
	},
	onLoad() {
		// 引入插件
		this.tcpSdk = uni.requireNativePlugin('TcpSdk');
		console.log(this.tcpSdk)
		// 测试插件是否正常加载
		this.testPlugin();
	},
	methods: {
		testPlugin() {
			// 调用测试方法
			const result = this.tcpSdk.openTest();
			this.addMessage('插件加载测试', result ? '成功' : '失败');

			// 设置默认数据格式
			this.tcpSdk.setDataFormat(this.formatList[this.formatIndex]);
		},

		onFormatChange(e) {
			this.formatIndex = e.detail.value;
			// 设置数据格式
			this.tcpSdk.setDataFormat(this.formatList[this.formatIndex]);
			this.addMessage('数据格式设置', `已设置为${this.formatList[this.formatIndex]}`);
		},

		connect() {
			if (!this.serverAddress) {
				uni.showToast({
					title: '请输入服务器地址',
					icon: 'none'
				});
				return;
			}

			this.addMessage('连接请求', `正在连接到 ${this.serverAddress}`);
			// 全局注册数据接收回调（只需要注册一次）
			this.tcpSdk.onDataReceived(function(data) {
			    console.log("收到服务器数据:", data)
			    // 处理数据
			})
			// 调用插件连接方法
			this.tcpSdk.connect(this.serverAddress, this.handerMsg,10000);
		},
		handerMsg(result){
			console.log(result)
			this.addMessage(result);
			if(result.state === 'CONNECT_SUCCESS'){
				this.isConnected =true
			}
		},
		disconnect() {
			this.addMessage('断开请求', '正在断开连接');

			// 调用插件断开连接方法
			this.tcpSdk.disconnect((result) => {
				this.addMessage('断开结果', JSON.stringify(result));
				this.isConnected = false;
			});
		},

		sendDataToServer() {
			if (!this.sendData) {
				uni.showToast({
					title: '请输入发送数据',
					icon: 'none'
				});
				return;
			}

			this.addMessage('发送数据', this.sendData);

			// 调用插件发送方法
			// 明确指定数据格式，确保与服务器预期一致
			const format = this.formatList[this.formatIndex];
			console.log(format)
			this.tcpSdk.send(this.sendData, format);
		},

		addMessage(type, content) {
			console.log([type,content])
			return
			// 添加消息到消息列表
			this.messageList.push({
				time: new Date().toLocaleString(),
				content: `[${type}] ${content}`
			});

		}
	}
}
</script>

<style>
.container {
	padding: 20rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin-bottom: 30rpx;
}

.form-group {
	margin-bottom: 20rpx;
}

.form-group label {
	display: block;
	margin-bottom: 10rpx;
	font-weight: bold;
}

input, textarea {
	width: 100%;
	padding: 10rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	box-sizing: border-box;
}

textarea {
	height: 120rpx;
}

.btn-group {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

button {
	padding: 10rpx 20rpx;
	background-color: #007AFF;
	color: white;
	border: none;
	border-radius: 6rpx;
}

button[disabled] {
	background-color: #CCCCCC;
}

.message-list {
	height: 300rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	padding: 10rpx;
}

.message-item {
	margin-bottom: 10rpx;
}

.picker {
	padding: 10rpx;
	border: 1rpx solid #ddd;
	border-radius: 6rpx;
	background-color: #f8f8f8;
}
</style>a